<div class="module-container">
  <h4>Horizontal Dropdown Navigation Component:</h4>
  <ul class="gui-nav" data-option='{"itemWidth":"120px", "itemHeight":"30px",
            "backgroundColor":"#eeeeee", "itemOverColor":"#d5d5d5",
            "animationDuration":800}'>
    <li><a href="#">Home</a></li>
    <li><a href="#">Sales</a>
      <ul>
        <li><a href="#">Sales Item 1</a></li>
        <li><a href="#">Sales Item 2</a></li>
        <li><a href="#">Sales Item 3</a>
          <ul>
            <li><a href="#">Sales Item 31</a></li>
            <li><a href="#">Sales Item 32</a>
              <ul>
                <li><a href="#">Sales Item 321</a>
                  <ul>
                    <li><a href="#">Sales Item 3211</a></li>
                    <li><a href="#">Sales Item 3212</a></li>
                  </ul>
                </li>
                <li><a href="#">Sales Item 322</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Sales Item 4</a></li>
        <li><a href="#">Sales Item 5</a></li>
      </ul>
    </li>
    <li><a href="#">Stocks</a>
      <ul>
        <li><a href="#">Stocks Item 1</a></li>
        <li><a href="#">Stocks Item 2</a>
          <ul>
            <li><a href="#">Stocks Item 21</a>
              <ul>
                <li><a href="#">Stocks Item 211</a></li>
                <li><a href="#">Stocks Item 212</a></li>
              </ul>
            </li>
            <li><a href="#">Stocks Item 22</a></li>
          </ul>
        </li>
        <li><a href="#">Stocks Item 3</a></li>
      </ul>
    </li>
    <li><a href="#">Stores</a>
      <ul>
        <li><a href="#">Stores Item 1</a></li>
        <li><a href="#">Stores Item 2</a></li>
      </ul>
    </li>
  </ul>

  <h5 class="code-label">Html Code:</h5>
  <pre class="prettyprint linenums">&lt;ul class="gui-nav" data-option='{"itemWidth":"120px", "itemHeight":"30px",
     "backgroundColor":"#eeeeee", "itemOverColor":"#d5d5d5",
     "animationDuration":800}'&gt;
 &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Sales&lt;/a&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 3&lt;/a&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="#"&gt;Sales Item 31&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Sales Item 32&lt;/a&gt;
      &lt;ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sales Item 321&lt;/a&gt;
        &lt;ul&gt;
         ...
        &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sales Item 322&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 4&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/li&gt;
  ...
&lt;/ul&gt;</pre>
  <h5 class="code-label">Js Code</h5>
  <pre class="prettyprint">$(".gui-nav").guiNav();</pre>

  <hr />

  <h4>Vertical Dropdown Navigation Component:</h4>

  <ul class="gui-nav gui-nav-vertical" data-option='{"border":"1px solid green"}'>
    <li><a href="#">Home</a></li>
    <li><a href="#">Sales</a>
      <ul>
        <li><a href="#">Sales Item 1</a></li>
        <li><a href="#">Sales Item 2</a></li>
        <li><a href="#">Sales Item 3</a>
          <ul>
            <li><a href="#">Sales Item 31 dfas dfadsf dfasdf dfasd</a></li>
            <li><a href="#">Sales Item 32</a>
              <ul>
                <li><a href="#">Sales Item 321</a>
                  <ul>
                    <li><a href="#">Sales Item 3211</a></li>
                    <li><a href="#">Sales Item 3212</a></li>
                  </ul>
                </li>
                <li><a href="#">Sales Item 322</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Sales Item 4</a></li>
        <li><a href="#">Sales Item 5</a></li>
      </ul>
    </li>
    <li><a href="#">Stocks</a>
      <ul>
        <li><a href="#">Stocks Item 1</a></li>
        <li><a href="#">Stocks Item 2</a>
          <ul>
            <li><a href="#">Stocks Item 21</a>
              <ul>
                <li><a href="#">Stocks Item 211</a></li>
                <li><a href="#">Stocks Item 212</a></li>
              </ul>
            </li>
            <li><a href="#">Stocks Item 22</a></li>
          </ul>
        </li>
        <li><a href="#">Stocks Item 3</a></li>
      </ul>
    </li>
    <li><a href="#">Stores</a>
      <ul>
        <li><a href="#">Stores Item 1</a></li>
        <li><a href="#">Stores Item 2</a></li>
      </ul>
    </li>
  </ul>

  <h5 class="code-label">Html Code:</h5>
  <pre class="prettyprint linenums">
&lt;ul class="gui-nav gui-nav-vertical" data-option='{"border":"1px solid green"}'&gt;
 &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Sales&lt;/a&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 3&lt;/a&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="#"&gt;Sales Item 31 dfas dfadsf dfasdf dfasd&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Sales Item 32&lt;/a&gt;
      &lt;ul&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sales Item 321&lt;/a&gt;
        &lt;ul&gt;
         ...
        &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Sales Item 322&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 4&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Sales Item 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/li&gt;
  ...
&lt;/ul&gt;</pre>
  <h5 class="code-label">Js Code</h5>
  <pre class="prettyprint">$(".gui-nav").guiNav();</pre>
</div>
